<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '资源管理'}, {name: '图片列表'}]"></v-breadcrumb>

        <div class="g-box" style="min-height:600px;">
            <div class="flex-center flex-between">
                <div class="upload-image">
                    <span class="el-icon-upload2"></span>
                    <input class="file" name="blobup_file_banner" type="file" multiple @change="uploadImages"
                           accept="image/*"/>
                </div>
                <div></div>
            </div>
            <div class="list mt-15">
                <div class="item pull-left" v-for="(item,index) in list" :key="index">
                    <el-image style="width:260px;height:260px;margin:0;padding:5px;border-bottom:1px solid #ddd;"
                              fit="contain" :preview-src-list="[item.url]" :src="item.url">
                        <div slot="error" style="width:100%;height:100%;border:1px solid #eee;"
                             class="image-slot color-999 font12 flex-center">暂无<br/>图片
                        </div>
                    </el-image>
                    <div class="pl-5 pr-5 pt-10 pb-10">
                        <div class="flex-center flex-between">
                            <div>{{ item.size|conver }}</div>
                            <div class="">{{ item.width }}px × {{ item.height }}px</div>
                        </div>
                        <div class="flex-center flex-between mt-10">
                            <el-button v-preventDbClick type="danger" plain size="mini" @click="del(item.id)">删除
                            </el-button>
                            <el-button v-preventDbClick type="primary" plain size="mini" @click="copy(item.url)">
                                复制链接
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="mt-5 mb-10 t-center">
                <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                               :page-size="obj.size"
                               :page-sizes="[15,30,50,100]"
                               :current-page.sync="obj.page"
                               :total="total"
                               @size-change="changeSize"
                               @current-change="changeCurrent">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            list: [],
            obj: {page: 1, size: 15},
            total: 0,
        };
    },

    created() {
        this.getData();
    },

    methods: {
        copy(copyText) {
            var inputTest = document.createElement('input');
            inputTest.value = copyText;
            document.body.appendChild(inputTest);
            inputTest.select();
            document.execCommand("Copy");
            inputTest.className = 'oInput';
            inputTest.style.display = 'none';
            tool.message('复制成功', 'success');
        },

        uploadImages() {
            let dom = document.getElementsByName('blobup_file_banner')[0];
            for (let i = 0; i < dom.files.length; i++) {
                setTimeout(() => {
                    let file = dom.files[i];
                    if (file) {
                        let formData = new FormData();
                        formData.append('file', file);
                        request({
                            url: '/manage/upload/image',
                            data: formData
                        }).then((res) => {
                            tool.message('上传成功', 'success', () => {
                                this.getData();
                            });
                        })
                    }
                }, 100)
            }
        },

        del(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/resource/del',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData(true);
                    })
                })
            });
        },

        getData(page) {
            this.obj.page = !!page ? this.obj.page : 1;
            request({
                url: '/manage/resource/list',
                data: this.obj
            }).then((res) => {
                this.list = res.data.data;
                this.total = res.data.total;
            })
        },

        changeCurrent(val) {
            this.obj.page = val;
            this.getData(true);
        },

        changeSize(e) {
            this.obj.size = e;
            this.obj.page = 1;
            this.getData();
        },
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");

.list {
    .item {
        margin: 0 15px 15px 0;
        border: 1px solid #ddd;
    }
}

.upload-image {
    width: 100px;
    height: 100px;
    border: 1px dashed #DCDFE6;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    float: left;

    img {
        width: 96px;
        height: 96px;
        border-radius: 5px;
    }

    span {
        font-size: 30px;
        display: inline-block;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 6;
    }

    .del {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 20px;
        color: white;
    }

    input {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        z-index: 9;
    }
}
</style>
